<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
  <!-- https://github.com/davidshimjs/qrcodejs -->
  <script src="../js/qrcode.js"></script>
</head>

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script>
    const dpr = window.devicePixelRatio || 1;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = canvas.clientWidth * dpr;
    canvas.height = canvas.clientHeight * dpr;
    ctx.scale(dpr, dpr);

    let currentZIndex = 1; // 用于动态调整 zIndex
    let offsetX = 0;
    let offsetY = 0;

    // 定义二维码对象
    const qrCodes = [
      { x: 50, y: 50, width: 150, height: 150, text: "https://example.com/1", color: "#ff0000", isDragging: false, zIndex: 1 },
      { x: 250, y: 250, width: 150, height: 150, text: "https://example.com/2", color: "#0000ff", isDragging: false, zIndex: 2 },
    ];

    // 绘制二维码到 canvas
    function drawQRCode(qrCode) {
      const tempDiv = document.createElement("div");
      const qrGenerator = new QRCode(tempDiv, {
        text: qrCode.text,
        width: qrCode.width,
        height: qrCode.height,
        colorDark: qrCode.color, // 设置二维码颜色
        colorLight: "#ffffff", // 背景颜色
      });
      const qrCanvas = tempDiv.querySelector("canvas");
      if (qrCanvas) {
        ctx.drawImage(qrCanvas, qrCode.x, qrCode.y, qrCode.width, qrCode.height);
      }
    }

    // 绘制所有二维码
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

      // 按 zIndex 排序后绘制二维码
      qrCodes
        .sort((a, b) => a.zIndex - b.zIndex)
        .forEach(qrCode => {
          drawQRCode(qrCode);
        });
    }

    // 检查鼠标是否在二维码内
    function isMouseInQRCode(mouseX, mouseY, qrCode) {
      return (
        mouseX >= qrCode.x &&
        mouseX <= qrCode.x + qrCode.width &&
        mouseY >= qrCode.y &&
        mouseY <= qrCode.y + qrCode.height
      );
    }

    // 节流函数
    function throttle(func, delay) {
      let lastTime = 0;
      return function (...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
          lastTime = now;
          func.apply(this, args);
        }
      };
    }

    // 鼠标按下事件
    canvas.addEventListener("mousedown", (event) => {
      const rect = canvas.getBoundingClientRect();
      const mouseX = event.clientX - rect.left;
      const mouseY = event.clientY - rect.top;

      qrCodes.forEach(qrCode => {
        if (isMouseInQRCode(mouseX, mouseY, qrCode)) {
          qrCode.isDragging = true;
          offsetX = mouseX - qrCode.x;
          offsetY = mouseY - qrCode.y;

          // 更新 zIndex，使当前二维码显示在最上层
          currentZIndex++;
          qrCode.zIndex = currentZIndex;
        }
      });

      draw();
    });

    // 鼠标移动事件
    canvas.addEventListener("mousemove", throttle((event) => {
      const rect = canvas.getBoundingClientRect();
      const mouseX = event.clientX - rect.left;
      const mouseY = event.clientY - rect.top;

      qrCodes.forEach(qrCode => {
        if (qrCode.isDragging) {
          qrCode.x = mouseX - offsetX;
          qrCode.y = mouseY - offsetY;
          draw();
        }
      });
    }, 16));

    // 鼠标释放事件
    canvas.addEventListener("mouseup", () => {
      qrCodes.forEach(qrCode => {
        qrCode.isDragging = false;
      });
    });

    // 初始绘制
    draw();
  </script>
</body>

</html>